<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>慧付单</title>
<link rel="stylesheet" href="${ctx}/static/plug/frozenui-1.3.0/css/frozen.css" media="all">
<link rel="stylesheet" href="${ctx}/static/css/recharge/unpayDetail.css" media="all">
<style type="text/css">
body {
	background-color: #F0EFF4
}
</style>
</head>
<body>
	<div class="ui-flex ui-flex-ver ui-flex-align-start" id="displayDiv"
		style="height: 450px; overflow: auto">
		<div id="noUnpayDiv" class="div-noUnpay" style="display: none">
			<div>
				<img alt="" src="${ctx}/static/image/recharge/smile.png">
			</div>
			<div class="div-text" style="padding-top: 20px">您以往的订单已全部付清，</div>
			<div class="div-text">可继续享受停车场微信无感支付！</div>
		</div>
	</div>
	<div class="ui-footer ui-footer-stable ui-border-t my-ui-footer">
		<div class="btn-div" id="btnDiv" style="display: none"></div>
	</div>
</body>
<script src="${ctx}/static/js/common.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/lib/zepto.min.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/js/frozen.js"></script>
<script src="${ctx}/static/js/jweixin-1.2.0.js"></script>
<script>
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: "${signature.appId}", // 必填，公众号的唯一标识
        timestamp: "${signature.timestamp}", // 必填，生成签名的时间戳
        nonceStr: "${signature.nonceStr}", // 必填，生成签名的随机串
        signature: "${signature.signature}",// 必填，签名，见附录1
        jsApiList: ['scanQRCode', 'chooseWXPay']
        // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });

	var paramObj = {
		"unpayDetailParams" : "${unpayDetailParams}",
		"topupParams" : "${topupParams}",
		"wxPayDtlParams" : "${wxPayDtlParams}"
	};

	$(function() {
        wx.ready(function () {
            $.post("${action}", {
                "params" : paramObj.unpayDetailParams
            }, function(resp) {
                if (resp.result) {
                    var unpayData = resp.data;
                    if (unpayData) {
                        var haveData = false;
                        var needMoney = 0;
                        if (unpayData.arrearsParkInfoList && unpayData.arrearsParkInfoList.length > 0) {
                            haveData = true;
                            for ( var i = 0; i < unpayData.arrearsParkInfoList.length; i++) {
                                var arrearsParkInfo = unpayData.arrearsParkInfoList[i];
                                needMoney += (arrearsParkInfo.afterMoney * -1);
                                $("#displayDiv").append(genUnpayDiv(arrearsParkInfo));
                            }
                        }

                        if (unpayData.unPayParkInfoList && unpayData.unPayParkInfoList.length > 0) {
                            haveData = true;
                            for ( var i = 0; i < unpayData.unPayParkInfoList.length; i++) {
                                var unPayParkInfo = unpayData.unPayParkInfoList[i];
                                needMoney += unPayParkInfo.charge;
                                $("#displayDiv").append(genUnpayDiv(unPayParkInfo));
                            }
                        }

                        if (haveData) {
                            $("#btnDiv").append(genPayBtnDiv(needMoney));
                            $("#btnDiv").show();
                        } else {
                            $("#noUnpayDiv").show();
                        }
                    } else {
                        $("#noUnpayDiv").show();
                    }
                } else {
                    showTips("warn", resp.msg);
                }
            });
		});

	});

	function genUnpayDiv(unpayDetail) {
		var htmlStr = "";
		if (unpayDetail) {
			htmlStr += "<div class='div-content'>";
			if (unpayDetail.chargeType == 0) {
				htmlStr += "<div class='div-title'>￥" + (unpayDetail.charge / 10).toFloat(2) + "</div>";
			}
			if (unpayDetail.chargeType == 2) {
				htmlStr += "<div class='div-title'>￥" + ((unpayDetail.afterMoney * -1) / 10).toFloat(2) + "</div>";
			}
			htmlStr += "<div class='div-text'>商家名称：" + unpayDetail.parkLotName + "</div>";
			htmlStr += "<div class='div-text'>进场时间：" + unpayDetail.inTime.toDateString() + "</div>";
			htmlStr += "<div class='div-text'>出场时间：" + unpayDetail.outTime.toDateString() + "</div>";

			if (unpayDetail.chargeType == 2) {
				htmlStr += "<div class='div-text'>计费：" + (unpayDetail.charge / 10).toFloat(2) + "元</div>";
			} else {
				htmlStr += "<div class='div-text'>计费：" + (unpayDetail.charge / 10).toFloat(2) + "元（未支付）</div>";
			}

			if (unpayDetail.chargeType == 2) {
				var qbPay = (unpayDetail.charge + unpayDetail.afterMoney - unpayDetail.changeCoupon) / 10;
				htmlStr += "<div class='div-text'>钱包支付：" + qbPay.toFloat(2) + "元</div>";
				htmlStr += "<div class='div-text'>赠券支付：" + (unpayDetail.changeCoupon / 10).toFloat(2) + "元</div>";
				htmlStr += "<div class='div-text'>欠费：" + ((unpayDetail.afterMoney * -1) / 10).toFloat(2) + "元</div>";
			}
			htmlStr += "</div>";
		}
		return htmlStr;
	}

	function genPayBtnDiv(needPayMoney) {
		var htmlStr = "";
		htmlStr += "<button class='ui-btn-lg btn ui-btn-primary' onclick='openTopup()'>充值支付（8折优惠）</button>";
		htmlStr += "<button class='ui-btn-lg btn' style='color: #898989;' onclick='wxPay(" + needPayMoney
				+ ")'>直接微信支付</button>";
		htmlStr += "<div class='remark-text'>支付后才可继续享受停车直通服务和折扣优惠</div>";
		return htmlStr;
	}


    //支付未付订单
    var canSubmit = true;
    function wxPay(needPayMoney) {
        var paraObj = {
            "appId": "${signature.appId}",
            "params": paramObj.wxPayDtlParams
        };
        if (canSubmit) {
            canSubmit = false;
            $.post("${action}", paraObj, function (obj) {
                console.log(obj);
                canSubmit = true;
                if (obj.result) {
                    var wxPayParams = JSON.parse(obj.data);
                    console.log(wxPayParams);
                    wx.chooseWXPay({
                        timestamp: wxPayParams.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                        nonceStr: wxPayParams.nonceStr, // 支付签名随机串，不长于 32 位
                        package: wxPayParams.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                        signType: wxPayParams.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                        paySign: wxPayParams.paySign, // 支付签名
                        success: function (res) {
                            console.log("pay success");
                            console.log(res);

                        }
                    });
                } else {
                    showTips("warn", obj.msg);
                    //location.reload(true);
                }
            });
        }

    }

	function openTopup() {
		var url = "${action}?params=" + paramObj.topupParams;
		window.location.href = url;
	}
</script>
</html>
